import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common

Item {
    id: root
    width: 800
    height: 600
    
    // 动画属性
    property bool animationPlaying: false
    property string generalName: "ym2__godliubei"
    property string skillName: "ym2__xiongzhi"
    property string skillColor: "#ff002b"

    // 图片裁剪相关属性
    property real cropY: 0
    property real cropHeight: 0
    property real imageScale: 1.0
    
    // 图片位置属性
    property real imageTargetX: width/2 - imageContainer.width/2
    property real imageInitialX: -imageContainer.width
    
    // 开始动画
    function playAnimation() {
        // 计算裁剪参数
        if (centerImage.status === Image.Ready) {
            calculateCropParams();
            animationSequence.start();
        } else {
            centerImage.statusChanged.connect(function() {
                if (centerImage.status === Image.Ready) {
                    calculateCropParams();
                    animationSequence.start();
                }
            });
        }
    }
    
    // 计算裁剪参数
    function calculateCropParams() {
        var aspectRatio = centerImage.sourceSize.height / centerImage.sourceSize.width;
        cropY = aspectRatio >= 1.5 ? centerImage.sourceSize.height * 0.125 : centerImage.sourceSize.height * 0.065;
        cropHeight = centerImage.sourceSize.width * 0.4228; // 148/350 ≈ 0.4228

        // 计算图片位置
        imageTargetX = width/2 - imageContainer.width;
        imageInitialX = -imageContainer.width;
        
        // 设置初始位置
        imageContainer.x = imageInitialX;
    }

    // 动画序列
    SequentialAnimation {
        id: animationSequence
        
        onStarted: {
            animationPlaying = true;
            // 重置状态
            centerBar.opacity = 0.75;
            centerImage.scale = 1;
            skillTextItem.opacity = 0;
            skillTextItem.scale = 0;
            canvas.visible = true;
            particleTimer.running = true;
        }
        
        onFinished: {
            animationPlaying = false;
            canvas.visible = false;
            particleTimer.running = false;
        }
        
        // 入场动画
        ParallelAnimation {
            // 线条动画
            PropertyAnimation { target: centerLine1; property: "x"; from: -root.width; to: 0; duration: 800 }
            PropertyAnimation { target: centerLine2; property: "x"; from: -root.width; to: 0; duration: 800 }
            PropertyAnimation { target: centerLine3; property: "x"; from: -root.width; to: 0; duration: 800 }
            
            // 中心条动画
            PropertyAnimation { target: centerBar; property: "opacity"; from: 0; to: 0.5; duration: 800 }
            
            // 图片动画
            PropertyAnimation { 
                target: imageContainer; 
                property: "x"; 
                from: imageInitialX; 
                to: imageTargetX;
                duration: 800; 
                // easing.type: Easing.OutBack 
            }
            
            // 文字动画
            PropertyAnimation { target: skillTextItem; property: "opacity"; from: 0; to: 1; duration: 800 }
            PropertyAnimation { 
                target: skillTextItem; 
                property: "scale"; 
                from: 0; 
                to: 1; 
                duration: 800; 
                easing.type: Easing.OutBack 
            }
        }
        
        // 保持显示
        PauseAnimation { duration: 1000 }
        
        // 退场动画
        ParallelAnimation {
            PropertyAnimation { target: centerBar; property: "opacity"; to: 0; duration: 500 }
            PropertyAnimation { target: centerLine1; property: "opacity"; to: 0; duration: 500 }
            PropertyAnimation { target: centerLine2; property: "opacity"; to: 0; duration: 500 }
            PropertyAnimation { target: centerLine3; property: "opacity"; to: 0; duration: 500 }
            PropertyAnimation { target: centerImage; property: "opacity"; to: 0; duration: 500 }
            PropertyAnimation { target: skillTextItem; property: "opacity"; to: 0; duration: 500 }
        }
    }

    // 中心条 - 红色背景
    Rectangle {
        id: centerBar
        width: parent.width
        height: parent.height * 0.25
        anchors.centerIn: parent
        color: root.skillColor
        opacity: 0.5
    }

    // 中心线3 - 主高光线
    Rectangle {
        id: centerLine3
        width: parent.width
        height: parent.height * 0.01
        anchors.verticalCenter: parent.verticalCenter
        gradient: Gradient {
            GradientStop { position: 0.0; color: "transparent" }
            GradientStop { position: 0.4; color: "white" }
            GradientStop { position: 0.6; color: "white" }
            GradientStop { position: 1.0; color: "transparent" }
        }
        layer.enabled: true
        layer.effect: DropShadow {
            radius: 8
            samples: 16
            color: "#40000000"
        }
        opacity: 0.75
    }

    // 角色图片
    Item {
        id: imageContainer
        y: (parent.height - height) / 2 // 垂直居中
        width: centerImage.sourceSize.width
        height: parent.height * 0.25
        clip: true
        
        Image {
            id: centerImage
            source: SkinBank.getGeneralPicture(generalName) || (SkinBank.GENERALCARD_DIR + 'card-back')
            width: parent.width
            y: -cropY
            scale: 1
            fillMode: Image.PreserveAspectFit
        }

        // 容器羽化效果
        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: LinearGradient {
                width: imageContainer.width
                height: imageContainer.height
                start: Qt.point(0, 0)
                end: Qt.point(width, 0)
                
                // 羽化渐变
                gradient: Gradient {
                    GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                    GradientStop { position: 0.2; color: Qt.rgba(0,0,0,1) }
                    GradientStop { position: 0.8; color: Qt.rgba(0,0,0,1) }
                    GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0) }
                }
            }
        }
    }

    // 字体加载
    FontLoader {
        id: aaLUOSHENHUA
        source: "../fonts/AALUOSHENHUA-2.TTF"
    }

    // 技能文字
    Text {
        id: skillTextItem
        text: Lua.tr(skillName)
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.horizontalCenter
        color: "white"
        font {
            family: aaLUOSHENHUA.name
            pixelSize: 80
            bold: true
        }
        style: Text.Outline
        styleColor: "#444"
        layer.enabled: true
        layer.effect: DropShadow {
            radius: 8
            samples: 16
            color: "#80000000"
        }
    }

    // 顶部线
    Rectangle{
        id: centerLine1
        width: parent.width
        height: 2
        anchors {
            top: centerBar.top
            // topMargin: -centerBar.height * 0.12
        }
        LinearGradient{
            width: parent.width
            height: parent.height
            start: Qt.point(0, 0)
            end: Qt.point(width, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.5; color: "white" }
                GradientStop { position: 1.0; color: "transparent" }
            }
            layer.enabled: true
            layer.effect: DropShadow {
                radius: 8
                samples: 16
                color: "#40000000"
            }
        }
        
        // 顶部线位置
        property real lineY: y + height / 2
    }

    // 底部线
    Rectangle{
        id: centerLine2
        width: parent.width
        height: 2
        anchors {
            top: centerBar.bottom
            // topMargin: -centerBar.height * 0.12
        }
        LinearGradient{
            width: parent.width
            height: parent.height
            start: Qt.point(0, 0)
            end: Qt.point(width, 0)
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.5; color: "white" }
                GradientStop { position: 1.0; color: "transparent" }
            }
            layer.enabled: true
            layer.effect: DropShadow {
                radius: 8
                samples: 16
                color: "#40000000"
            }
        }

        // 底部线位置
        property real lineY: y + height / 2
    }

    // 粒子效果画布
    Canvas {
        id: canvas
        anchors.fill: parent
        visible: false
        z: 10
        
        property var particles: []
        property int particleCount: 50
        
        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0, 0, width, height);
            
            for (var i = 0; i < particles.length; i++) {
                var p = particles[i];
                
                // 绘制光晕
                ctx.beginPath();
                var gradient = ctx.createRadialGradient(
                    p.x, p.y, 0, 
                    p.x, p.y, p.radius * 3
                );
                gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
                gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                
                ctx.fillStyle = gradient;
                ctx.arc(p.x, p.y, p.radius * 3, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制粒子
                ctx.beginPath();
                ctx.fillStyle = "white";
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fill();
            }
        }
    }
    
    // 粒子动画计时器
    Timer {
        id: particleTimer
        interval: 10
        running: false
        repeat: true
        
        onTriggered: {

            // 更新粒子
            for (var i = 0; i < canvas.particles.length; i++) {
                var p = canvas.particles[i];
                p.x += p.vx;
                // p.y += p.vy;
                p.radius *= 0.98;
                
                // 移除不可见的粒子
                if (p.radius < 0.1 || p.x < -50 || p.x > canvas.width + 50) {
                    canvas.particles.splice(i, 1);
                    i--;
                }
            }
            
            // 添加新粒子
            if (canvas.particles.length < canvas.particleCount) {
                var top = Math.random() > 0.5;
                canvas.particles.push({
                    x: Math.random() * canvas.width,
                    y: top ? (centerLine1.lineY + (Math.random() - 0.5) * 10) : (centerLine2.lineY + (Math.random() - 0.5) * 10),
                    radius: 1 + Math.random() * 3,
                    vx: (Math.random() - 0.5) * 10,
                });
            }
            
            canvas.requestPaint();
        }
    }

    function loadData(data) {
        generalName = data.general;
        skillName = data.skill_name;
        skillColor = data.skill_color;
        playAnimation();
    }

    // Component.onCompleted: {
    // }
}